<template>
  <main>
    <div class="require-container">
      <div class="require-title">
        <span style="font-weight: 600; margin-left: 20px; margin-right: 20px">
          新增采购需求
        </span>
      </div>
      <div class="require-body">
        <div class="form-content">
          <el-form
            :rules="rules"
            ref="ruleForm"
            label-position="right"
            label-width="90px"
            :model="form"
          >
            <el-form-item label="需求类型" prop="reqType">
              <el-input v-model="form.reqType"></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="proName">
              <el-input v-model="form.proName"></el-input>
            </el-form-item>
            <el-form-item label="工程类型" prop="proType">
              <el-input v-model="form.proType"></el-input>
            </el-form-item>
            <el-form-item label="工程编码">
              <el-input v-model="form.proCode"></el-input>
            </el-form-item>
            <el-form-item label="采购类别">
              <el-input v-model="form.bugType"></el-input>
            </el-form-item>
            <el-form-item label="估算价格">
              <el-input v-model="form.prePrice"></el-input>
            </el-form-item>
            <el-form-item label="采购范围">
              <el-input v-model="form.buyRange"></el-input>
            </el-form-item>
            <el-form-item label="工期需求" prop="timeReq">
              <el-date-picker
                v-model="form.timeReq"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="供应商需求">
              <el-input v-model="form.busReq"></el-input>
            </el-form-item>
            <el-form-item label="需求原因">
              <el-input v-model="form.reqCause"></el-input>
            </el-form-item>
            <el-form-item>
              <button
                class="shadow-button shiny"
                @click="submitForm('ruleForm')"
              >
                立即创建
              </button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import { addRequirement } from "api/require.api";

export default {
  name: "requireManage",
  data() {
    return {
      form: {
        reqType: "",
        proName: "",
        proType: "",
        proCode: "",
        bugType: "",
        prePrice: "",
        buyRange: "",
        timeReq: "",
        busReq: "",
        reqCause: "",
      },
      rules: {
        reqType: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        proType: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        proName: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        
        timeReq: [{ required: true, message: "内容不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    getId() {
      return new Date().getTime();
    },
    submitForm(formName) {
      if (!this.form.timeReq) {
        this.$message.error('请输入工期需求');
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({
            path: "requireManage",
          });
          addRequirement({ id: this.getId(), ...this.form });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.require-container {
  margin: 0 auto;
  max-width: 80vw;
  padding: 20px;
  .require-title {
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
  }
  .require-body {
    padding: 20px;
    background-color: #fff;
  }
  .form-content {
    margin-left: 80px;
    margin-top: 50px;
  }
}
</style>